<template>
  <div>  <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">
    <el-table-column
        label="用户名称"
        prop="name">
    </el-table-column>
    <el-table-column
        label="所属公司"
        prop="name">
    </el-table-column>
    <el-table-column
        label="角色类型"
        prop="type">
    </el-table-column>
    <el-table-column
        label="状态"
        prop="name">
    </el-table-column>
    <el-table-column
        label="创建时间"
        prop="date">
    </el-table-column>
    <el-table-column
        align="right">
      <template slot="header" slot-scope="scope">
        <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">绑定用户</el-button>
        <!--        <el-button-->
        <!--            size="mini"-->
        <!--            type="danger"-->
        <!--            @click="handleDelete(scope.$index, scope.row)">Delete</el-button>-->
      </template>
    </el-table-column>
  </el-table>
    <el-dialog
        title="新建角色"
        :visible.sync="centerDialogVisible"
        width="40%"
        center>
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="角色名称">
          <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="所属公司">
          <el-input v-model="formLabelAlign.region"></el-input>
        </el-form-item>
        <el-form-item label="创建日期">
          <el-input v-model="formLabelAlign.type"></el-input>
        </el-form-item>
        <el-form-item label="角色权限">
          <el-tree
              :data="treeData"
              show-checkbox
              node-key="id"
              :default-expanded-keys="[2, 3]"
              :default-checked-keys="[5]"
              :props="defaultProps">
          </el-tree>
        </el-form-item>
      </el-form>
<div align="center"><el-button  @click="centerDialogVisible = false">取 消</el-button>
  <el-button type="primary"  @click="centerDialogVisible = false">确 定</el-button></div>

    </el-dialog>
  </div>

</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      },{
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: '',
        permissions:''
      },
      centerDialogVisible:false,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        type:'基本角色'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        type:'基本角色'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        type:'基本角色'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        type:'自定义角色'
      }],
      search: ''
    }
  },
  methods: {
    handleEdit(index, row) {
      this.centerDialogVisible=true
      console.log(document.documentElement.clientWidth)
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  },
}
</script>
